<template>
<div class="login">
    <div class="zhong">
        <div class="tu">
            <img :src="imgsrc2">
        </div>
        <div class="xia">
        <el-form :model="ruleForm" :rules="rules" ref="ruleFormm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
         <el-input v-model="ruleForm.username" prefix-icon="el-icon-user-solid"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
    <el-input v-model="ruleForm.password" show-password  prefix-icon="el-icon-s-goods"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="geng">登录</el-button>
    <el-button @click="cz">重置</el-button>
  </el-form-item>
</el-form>
        </div>
    </div>
</div>
</template>
<script>
import { getLogin,menusList } from "@/api/api.js";
import {fn} from '@/utils/routeList.js'; 
export default {
  name: "Login",
  props: [],
  data() {
    return {
       imgsrc2: require('../assets/微信图片_20220402113040.jpg'),
      // imgUrl: require("../assets/微信图片_20220402113040.jpg"),
      ruleForm: {
        username: "admin",
        password: "123456"
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[0-9a-zA-Z]{3,12}$/,
            message: "必须是数字字母3-12位的组合",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    //钩子函数实例创建之后
  },
  methods: {
    //方法
    geng() {
      this.$refs.ruleFormm.validate(async valid => {
        if (valid) {
          let res = await getLogin(this.ruleForm);
          if (res.meta.status === 200) {
            localStorage.setItem("token", res.data.token);
            // localStorage.setItem('users',JSON.stringify(res.data.data))
            this.loadRoute()
            // 存vuex本地
            //  this.$store.commit('add',res.data)
            this.$router.push("/home");
          }
        } else {
          return false;
        }
      });
    },

      //动态路由方法
    async loadRoute() {
      let res = await menusList();
       localStorage.setItem('menusList',JSON.stringify(res.data))
      let newList = fn(res.data)
       console.log('82路由',newList);
      newList.forEach((item) => {
        this.$router.addRoute("Home", item);
      });
     },

    cz() {
      //重置按钮
      this.$refs.ruleFormm.resetFields();
    }
  },
  components: {
    //注册子组件
  },
  watch: {
    //监听
  }
};
</script>
<style lang="scss" scoped>
.login {
  display: flex;
  width: 100%;
  height: 1000px;
  background-color: rgba(162, 45, 246, 0.446);
}
.zhong {
  width: 600px;
  height: 400px;
  border: none;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 5px;
  margin-top: 300px;
  border: #35a5e5 1px solid;
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
.tu {
  img {
    width: 160px;
    margin-left: 230px;
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    height: 160px;
    margin-top: -50px;
    border-radius: 160px;
  }
}
.xia {
  width: 400px;
  height: 30px;
  margin-left: 80px;
  margin-top: 30px;
}
</style>